<template>
  <el-card class="top" shadow="hover" style="height: calc(100vh - 20px)">
    <template #header>
      <div class="card-header">
        <span>模拟试卷申请</span>
      </div>
    </template>
    <el-form ref="searchForm" :inline="true" :model="search" status-icon>
      <el-form-item label="姓名" prop="name">
        <el-input v-model.trim="search.name" clearable style="width: 170px"/>
      </el-form-item>
      <el-form-item label="专业" prop="examDateId">
        <el-cascader v-model="search.examDateId" :options="examDates" :props="{expandTrigger: 'hover',value:'id',label:'name',emitPath:false}" clearable style="width: 170px"/>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model.trim="search.mobile" clearable style="width: 170px"/>
      </el-form-item>
      <el-form-item label="快递状态" prop="sendState">
        <el-select v-model="search.sendState" style="width: 170px">
          <el-option label="全部" value=""/>
          <el-option label="已寄出" value="已寄出"/>
          <el-option label="未寄出" value="未寄出"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button plain type="primary" @click="this.$refs['searchForm'].resetFields();this.list()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data" border class="top" stripe style="width: 100%;margin-top: 0">
      <el-table-column label="姓名" prop="name" show-overflow-tooltip width="100"/>
      <el-table-column label="层次" prop="cenci.name" show-overflow-tooltip width="100"/>
      <el-table-column label="专业" prop="zhuanye.name" show-overflow-tooltip width="200"/>
      <el-table-column label="考试时间" prop="examDate.date" show-overflow-tooltip width="100"/>
      <el-table-column label="电话" prop="mobile" show-overflow-tooltip width="150"/>
      <el-table-column label="地址" min-width="150" prop="addr">
        <template #default="scope">
          {{scope.row.pcdName + ' '+ scope.row.addr}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="快递状态" show-overflow-tooltip width="150">
        <template #default="scope">
          <el-tag v-if="scope.row.sendState === '已寄出'" type="success">已寄出</el-tag>
          <el-tag v-else type="info">未寄出</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" width="100">
        <template #default="scope">
          <a class="op" @click="this.createDataState.open = true;this.createDataState.id = scope.row.id;">更新</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="paging.currentPage"
        :default-page-size="20"
        :page-size="paging.pageSize"
        :page-sizes="[20, 50, 100]"
        :total="paging.totalRow"
        background
        layout="sizes, prev, pager, next"
        style="margin-top: 20px;margin-bottom: 20px;float: right"
        @size-change="sizeChange"
        @current-change="currentChange"
    />
  </el-card>
  <create :state="createDataState" @updated="list"/>
</template>
<script>

import Create from "@/views/exam-mock/Create.vue";

export default {
  name: "List",
  components: {Create},
  data() {
    return {
      search: {name: null, mobile: null, sendState: '', examDateId: null},
      examDates: [],
      createDataState: {open: false, id: null},
      data: [],
      paging: {currentPage: 1, pageSize: 20, totalRow: 0}
    }
  },
  async created() {
    this.examDates = await this.post('/basic/exam-date/select-list')
    this.examDates.forEach(item => {
      if (!item.children) {
        item.disabled = true
        return
      }
      item.children.forEach(child => {
        if (!child.children) item.disabled = true
      });
    })
    await this.list()
  },
  methods: {
    sizeChange(pageSize) {
      this.paging.pageSize = pageSize;
      this.list();
    },
    currentChange(currentPage) {
      this.paging.currentPage = currentPage;
      this.list();
    },
    async list() {
      let data = await this.post('/exam-mock/list/' + this.paging.pageSize + '/' + this.paging.currentPage, {
        ...this.search
      });
      this.data = data.data
      this.paging.totalRow = parseInt(data.totalRow)
    }
  }
}
</script>

<style scoped>
a.op {
  font-size: 13px;
}
</style>